﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<style>
    .search-box {
        background: #fff;
        padding: 15px;
        margin-bottom: 10px;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .page-container {
        background: #fff;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .layui-table {
        margin-top: 0;
    }
    .layui-table th {
        background-color: #f8f9fa;
        font-weight: 600;
    }
    body {
        background-color: #f5f5f5;
        margin: 0;
        padding: 10px;
    }
</style>
<body>
    <div class="search-box">
        <div class="layui-form">
            <div class="layui-form-item" style="margin-bottom: 0;">
                <label class="layui-form-label">项目编码</label>
                <div class="layui-input-inline">
                    <input type="text" id="personName" name="personName" placeholder="请输入项目编码" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">项目名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="interviewPeople" name="interviewPeople" placeholder="请输入项目名称" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">项目类型:</label>
                <div class="layui-input-inline">
                    <select id="testingResult" name="testingResult">
                        <option value="0">请选择检测结果</option>
                        <option value="1">项目点检</option>
                        <option value="2">项目保养</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchForm">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary" onclick="resetForm()">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                    <button type="button" class="layui-btn layui-bg-blue" onclick="addInspectionRecord()"><i class="layui-icon layui-icon-addition"></i>新增</button>
                    <button type="button" class="layui-btn layui-bg-red" onclick="batchDeleteRecords()"><i class="layui-icon &#xe640; layui-icon-delete"></i>批量删除</button>
                </div>
            </div>
        </div>
    </div>
    <div class="page-container">
        @Html.AntiForgeryToken()
        <table class="layui-table" lay-size="lg">
            <thead>
                <tr>
                    <th width="50">
                        <input type="checkbox" lay-filter="selectAll" title="全选">
                    </th>
                    <th>项目编码</th>
                    <th>项目类型</th>
                    <th>项目内容</th>
                    <th>标准</th>
                    <th>是否启用</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tb">
            </tbody>
        </table>
        <div id="pagination"></div>
    </div>
</body>
<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
<script>
    // 全局变量
    var currentPage = 1;
    var pageSize = 10;
    var totalCount = 0;

    layui.use(['form', 'layer', 'laypage'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var laypage = layui.laypage;

        // 页面加载时获取数据
        loadSpotChecksData();

        // 全选/全不选
        form.on('checkbox(selectAll)', function(data) {
            $('input[name="selectItem"]').prop('checked', data.elem.checked);
            form.render('checkbox');
        });

        // 监听单个复选框变化
        form.on('checkbox(selectItem)', function(data) {
            var allChecked = $('input[name="selectItem"]').length === $('input[name="selectItem"]:checked').length;
            $('input[lay-filter="selectAll"]').prop('checked', allChecked);
            form.render('checkbox');
        });

        // 渲染分页
        window.renderPagination = function() {
            laypage.render({
                elem: 'pagination',
                count: totalCount,
                limit: pageSize,
                curr: currentPage,
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                jump: function (obj, first) {
                    if (!first) {
                        currentPage = obj.curr;
                        pageSize = obj.limit;
                        loadSpotChecksData();
                    }
                }
            });
        }

        // 搜索表单提交
        form.on('submit(searchForm)', function (data) {
            currentPage = 1;
            loadSpotChecksData();
            return false;
        });

        // 渲染表单
        form.render();
    });

    // 加载点检保养项目数据
    function loadSpotChecksData() {
        var projectCode = $('#personName').val();
        var projectName = $('#interviewPeople').val();
        var projectType = $('#testingResult').val();
        
        if (projectType == '0') projectType = null;

        $.ajax({
            url: '/SpotChecks/GetSpotChecks',
            type: 'GET',
            data: {
                projectCode: projectCode,
                projectName: projectName,
                projectType: projectType
            },
            success: function (data) {
                if (data && data.length > 0) {
                    renderTable(data);
                    totalCount = data.length;
                    renderPagination();
                } else {
                    $('#tb').html('<tr><td colspan="8" style="text-align: center;">暂无数据</td></tr>');
                    $('#pagination').html('');
                }
            },
            error: function (xhr, status, error) {
                layui.layer.msg('数据加载失败：' + error, { icon: 2 });
            }
        });
    }

    // 渲染表格数据
    function renderTable(data) {
        var tbody = $('#tb');
        tbody.empty();
        
        var startIndex = (currentPage - 1) * pageSize;
        var endIndex = Math.min(startIndex + pageSize, data.length);
        var pageData = data.slice(startIndex, endIndex);

        if (pageData.length === 0) {
            tbody.html('<tr><td colspan="8" style="text-align: center;">暂无数据</td></tr>');
            return;
        }

        $.each(pageData, function (index, item) {
            var projectTypeText = item.projectType == 1 ? '设备点检' : '设备保养';
            var statesText = item.states == 1 ? '是' : '否';
            var statesClass = item.states == 1 ? 'layui-btn-normal' : 'layui-btn-primary';
            
            var row = '<tr>' +
                '<td><input type="checkbox" name="selectItem" lay-filter="selectItem" value="' + item.id + '" lay-skin="primary"></td>' +
                '<td>' + (item.projectCode || '') + '</td>' +
                '<td>' + projectTypeText + '</td>' +
                '<td>' + (item.projectContent || '') + '</td>' +
                '<td>' + (item.standard || '') + '</td>' +
                '<td><span class="layui-btn layui-btn-xs ' + statesClass + '">' + statesText + '</span></td>' +
                '<td>' + (item.remark || '') + '</td>' +
                '<td>' +
                    '<button class="layui-btn layui-btn-xs" onclick="editRecord(' + item.id + ')">编辑</button>' +
                    '<button class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteRecord(' + item.id + ')">删除</button>' +
                '</td>' +
                '</tr>';
            tbody.append(row);
        });
        
        // 重新渲染表单元素
        layui.form.render();
    }

    // 新增点检保养项目
    function addInspectionRecord() {
        layui.layer.open({
            type: 2,
            title: '新增设备点检保养项目',
            shadeClose: false,
            shade: 0.5,
            maxmin: true,
            area: ['90%', '80%'],
            content: '/SpotChecks/AddSpotChecksView',
            end: function () {
                // 弹窗关闭后刷新列表
                loadSpotChecksData();
            }
        });
    }

    // 编辑记录
    function editRecord(id) {
        layui.layer.open({
            type: 2,
            title: '编辑设备点检保养项目',
            shadeClose: false,
            shade: 0.5,
            maxmin: true,
            area: ['800px', '600px'],
            content: '/SpotChecks/UpdateSpotChecksView?id=' + id,
            end: function () {
                // 弹窗关闭后刷新列表
                loadSpotChecksData();
            }
        });
    }

    // 删除记录
    function deleteRecord(id) {
        layui.layer.confirm('确定要删除这条记录吗？', {
            btn: ['确定', '取消']
        }, function (index) {
            var token = $('input[name="__RequestVerificationToken"]').val();
            
            $.ajax({
                url: '/SpotChecks/DeletedSpotChecks',
                type: 'POST',
                data: { id: id },
                headers: {
                    'RequestVerificationToken': token
                },
                success: function (result) {
                    layui.layer.msg('删除成功！', { icon: 1 });
                    loadSpotChecksData();
                },
                error: function (xhr, status, error) {
                    layui.layer.msg('删除失败：' + error, { icon: 2 });
                }
            });
            layui.layer.close(index);
        });
    }

    // 批量删除记录
    function batchDeleteRecords() {
        var selectedIds = [];
        $('input[name="selectItem"]:checked').each(function() {
            selectedIds.push($(this).val());
        });

        if (selectedIds.length === 0) {
            layui.layer.msg('请选择要删除的记录！', { icon: 0 });
            return;
        }

        layui.layer.confirm('确定要删除选中的 ' + selectedIds.length + ' 条记录吗？', {
            btn: ['确定', '取消']
        }, function (index) {
            var token = $('input[name="__RequestVerificationToken"]').val();
            
            $.ajax({
                url: '/SpotChecks/BatchDeleteSpotChecks',
                type: 'POST',
                data: {
                    ids: selectedIds.join(','),
                    __RequestVerificationToken: token
                },
                success: function (response) {
                    if (response.success) {
                        layui.layer.msg(response.message, { icon: 1 });
                        loadSpotChecksData();
                    } else {
                        layui.layer.msg(response.message, { icon: 2 });
                    }
                },
                error: function (xhr, status, error) {
                    layui.layer.msg('删除失败：' + error, { icon: 2 });
                }
            });
            layui.layer.close(index);
        });
    }

    // 重置表单
    function resetForm() {
        $('#personName').val('');
        $('#interviewPeople').val('');
        $('#testingResult').val('0');
        layui.form.render('select');
        currentPage = 1;
        loadSpotChecksData();
    }
</script>